<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 0 20px;
			border: 1px solid #ccc;
			height: 100%;
		}
		.el-form {
			background: #fff;
			padding-bottom: 20px;
			margin: 0 0 20px;
		}
		.project {
			display: flex;
			border-bottom: 1px solid #ccc;
			padding-top: 20px;
		}
		.upimgs {
			display: flex;
			justify-content: space-around;
			padding: 20px 0;
		}
		.title {
			font-size: 20px;
			margin-left: 20px;
		}
		.filetitle {
			font-size: 20px;
			margin-top: 20px;
			margin-left: 20px;
		}
		.logoimg {
			display: flex;
			align-items: center;
			margin-top: 20px;
			margin-left: 20px;
		}
		.logoimg .title {
			margin-right: 10px;
		}
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 80px;
			height: 80px;
			line-height: 80px;
			text-align: center;
		}
		.avatar {
			width: 80px;
			height: 80px;
			display: block;
		}
		.upload {
			margin-left: 20px;
		}
		.select {
			margin-left: 30px;
			margin-bottom: 20px;
		}
		.pagetitle {
			color: #409EFF;
			font-size: 20px;
			background: #fff;
			padding: 10px 20px;
			border-bottom: 1px solid #ccc;
		}
		.el-select .el-input {
			width: 105px;
		}
	</style>
</block>
<block name="content">
	<div class="pagetitle" v-if="param.type == 'add'">创建合伙人账号</div>
	<div class="pagetitle" v-else>编辑合伙人账号</div>
	<el-form ref="form" :model="param" label-width="110px">
		<div class="project">
			<div class="title">登录信息</div>
			<div>
				<el-form-item label="使用者姓名">
					<el-input size="small" v-model="param.name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="登录手机">
					<el-input size="small" v-model="param.mobile" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="登录密码">
					<el-input size="small" v-model="param.password" show-password placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="密码确定">
					<el-input size="small" v-model="param.repassword" show-password placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="身份证号">
					<el-input size="small" v-model="param.cert_id" placeholder="请输入"></el-input>
				</el-form-item>
			</div>
		</div>
		<div class="project">
			<div class="title">管辖城市</div>
			<div class="select">
				<el-select size="small" v-model="param.province" placeholder="省">
					<el-option label="广东" value="guangdong"></el-option>
					<el-option label="广西" value="guangxi"></el-option>
					<el-option label="福建" value="fujian"></el-option>
				</el-select>
				<el-select size="small" v-model="param.city" placeholder="市">
					<el-option label="深圳" value="shenzhen"></el-option>
					<el-option label="桂林" value="guilin"></el-option>
					<el-option label="厦门" value="xiamen"></el-option>
				</el-select>
				<el-select size="small" v-model="param.area" placeholder="区">
					<el-option label="南山" value="nanshan"></el-option>
					<el-option label="朝阳" value="chaoyang"></el-option>
					<el-option label="罗湖" value="luohu"></el-option>
				</el-select>
			</div>
		</div>
		<div class="project">
			<div class="title">公司信息</div>
			<div>
				<el-form-item label="公司名称">
					<el-input size="small" v-model="param.company_name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="法人代表">
					<el-input size="small" v-model="param.corporation_name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input size="small" v-model="param.contact" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="公司地址">
					<el-select size="small" v-model="param.province" placeholder="省">
						<el-option label="广东" value="广东"></el-option>
						<el-option label="广西" value="广西"></el-option>
						<el-option label="福建" value="福建"></el-option>
					</el-select>
					<el-select size="small" v-model="param.city" placeholder="市">
						<el-option label="深圳" value="深圳"></el-option>
						<el-option label="桂林" value="桂林"></el-option>
						<el-option label="厦门" value="厦门"></el-option>
					</el-select>
					<el-select size="small" v-model="param.area" placeholder="市">
						<el-option label="罗湖" value="罗湖"></el-option>
						<el-option label="南山" value="南山"></el-option>
						<el-option label="朝阳" value="朝阳"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="详细地址">
					<el-input size="small" v-model="param.address" placeholder="请输入"></el-input>
				</el-form-item>
			</div>
		</div>

		<div class="filetitle">相关文件</div>
		<div class="upimgs">
			<div class="logoimg">
				<div class="userlogo">营业执照</div>
				<div class="upload">
					<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleBusinessLicenseSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="param.full_business_license" :src="param.full_business_license" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
			<div class="logoimg">
				<div class="userlogo">合同</div>
				<div class="upload">
					<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleContractSuccess"  :before-upload="beforeAvatarUpload">
						<img v-if="param.full_contract" :src="param.full_contract" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
			<div class="logoimg">
				<div class="userlogo">法人身份证</div>
				<div class="upload">
					<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleCertidFrontSuccess"  :before-upload="beforeAvatarUpload">
						<img v-if="param.full_certid_front" :src="param.full_certid_front" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="upload">
					<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleCertidSideSuccess"  :before-upload="beforeAvatarUpload">
						<img v-if="param.full_certid_side" :src="param.full_certid_side" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
		</div>

		<el-form-item>
			<el-button v-if="param.type == 'add'" type="primary" @click="onSubmit">创建此账号</el-button>
			<el-button v-else type="primary" @click="onSubmit">编辑此账号</el-button>
			<el-button>取消</el-button>
		</el-form-item>
	</el-form>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    param: {
                        id: '{$data["id"]}',
                        type: '{$type}',
                        name: "{$data['name']}",
                        mobile: "{$data['mobile']}",
                        password: "",
                        repassword: "",
                        cert_id: "{$data['cert_id']}",
                        company_name: "{$data['company_name']}",
                        corporation_name: "{$data['corporation_name']}",
                        city: "{$data['city']}",
                        province: "{$data['province']}",
                        area: "{$data['area']}",
                        address: "{$data['address']}",
                        business_license: "{$data['business_license']}",
                        contract: "{$data['contract']}",
                        certid_front: "{$data['certid_front']}",
                        certid_side: "{$data['certid_side']}",
                        full_business_license: "{$data['full_business_license']}",
                        full_contract: "{$data['full_contract']}",
                        full_certid_front: "{$data['full_certid_front']}",
                        full_certid_side: "{$data['full_certid_side']}",
                    },
                    imageUrl: "",
                    uploadUrl: HOME_URL + "/Admin/File/upload",
					uploadParam: {
						type: '',
						size: 0
					}
                }
            },
            beforeCreate() {
            },
            methods: {
                onSubmit() {
					var _this = this;
					$.post(HOME_URL+"/orderAdmin/Partner/update", _this.param, function (data) {
					    console.log(data);
                        if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '创建成功'
                            });
                            setTimeout(function () {
                                location.href = HOME_URL + "/orderAdmin/Partner/index";
                            }, 1000);
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleBusinessLicenseSuccess(res, file) {
                    this.param.business_license = file.response.data.fileid;
                    this.param.full_business_license = URL.createObjectURL(file.raw);
                },
                handleContractSuccess(res, file) {
                    this.param.contract = file.response.data.fileid;
                    this.param.full_contract = URL.createObjectURL(file.raw);
                },
                handleCertidFrontSuccess(res, file) {
                    this.param.certid_front = file.response.data.fileid;
                    this.param.full_certid_front = URL.createObjectURL(file.raw);
                },
                handleCertidSideSuccess(res, file) {
                    this.param.certid_side = file.response.data.fileid;
                    this.param.full_certid_side = URL.createObjectURL(file.raw);
                    console.log(this.param);
                },
                beforeAvatarUpload(file) {
                    this.uploadParam.type = file.name.split('.')[1];
                    this.uploadParam.size = file.size;
                }
            }
        });
	</script>
</block>
